<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>feOffset</title>
  </head>
  <body>
    <svg
      width="150"
      height="150"
      viewBox="0 0 150 150"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <defs>
        <filter id="f1" x="0" y="0" width="120" height="120">
          <!-- 第一个示例将矩形（使用 <feOffset> ）偏移，然后将原始图像（使用 <feBlend> ）混合到偏移图像上 -->
          <!-- in2 属性定义了混合操作中的第二个图像 -->
          <feOffset in="SourceGraphic" dx="20" dy="20" />
          <feColorMatrix
            type="matrix"
            values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0"
          />

          <feGaussianBlur stdDeviation="10" />
          <feBlend in="SourceGraphic" in2="offOut" />
        </filter>
      </defs>
      <rect
        x="0"
        y="0"
        width="90"
        height="90"
        style="fill: yellow; stroke: green; stroke-width: 3"
        filter="url(#f1)"
      />
    </svg>
  </body>
</html>
